<template>
  <el-container>
    <!-- header -->
    <el-header style="height:auto">
      <nav-head :user="user"></nav-head>
      <carousel :carousels="carousels"></carousel>
      <nav-bar></nav-bar>
    </el-header>
    <!-- main -->
    <el-main>
      <el-row class="common-content-row">
        <el-col>
          <div>
            <p></p>
          </div>
        </el-col>
        <el-col>
          <div class="common-content">
            <!-- 作品 -->
            <recommond :recommondItems="recommondItems"
                       ></recommond>
          </div>
        </el-col>
        <el-col>
          <div>
            <p></p>
          </div>
        </el-col>
      </el-row>
    </el-main>
    <!-- footer -->
    <el-footer style="height:auto">
      <footer-bar></footer-bar>
    </el-footer>
  </el-container>

</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import NavHead from '@/components/NavHead.vue'
import Carousel from '@/components/Carousel.vue'
import NavBar from '@/components/NavBar.vue'
import UpdateTable from '@/components/UpdateTable.vue'
import FooterBar from '@/components/FooterBar.vue'
import Recommond from '@/components/Recommond.vue'
import Router from 'vue-router';
import api from '@/api/movie'
export default {
  name: 'home',
  components: {
    HelloWorld,
    NavHead,
    Carousel,
    NavBar,
    UpdateTable,
    FooterBar,
    Recommond
  },
  created() {
    this.fetchData()
  },
  data: function () {
    return {
      list:[],
      page:1,
      limit:24,
      route: this.$route,
      visible: false,
      user: null,
      recommondItems:[],
      recommondObject:{
        name:'',
        img:'',
        type:''
      },
      rankingObject:{
        id: 1,
        name: '',
        createTime: '',
        author: '',
        type: '',
        img: '',
        showWord: true
      },
      rankinglist:[],
      // 由后台传入cards不需要require，后期修改
      carousels: [
        require('../assets/img/1.jpg'),
        require('../assets/img/2.jpg'),
        require('../assets/img/3.jpg'),
        require('../assets/img/4.jpg')
      ],
    }
  },
  methods:{
    fetchData(){
      api.getMoviePageInfo(this.page,this.limit).then(response=>{
        this.list=response.data.records
        for (let i = 0; i < this.list.length; i++) {
          this.recommondObject.name=this.list[i].name
          this.recommondObject.img=this.list[i].image
          this.recommondObject.type=this.list[i].keyword

          this.rankingObject.id=i+1
          this.rankingObject.name = this.list[i].name
          this.rankingObject.createTime = this.list[i].createTime
          this.rankingObject.author = this.list[i].director
          this.rankingObject.type = this.list[i].keyword
          this.rankingObject.img = this.list[i].image
          this.rankinglist.push({ ...this.rankingObject });
          this.recommondItems.push({ ...this.recommondObject });
        }
        this.rankinglist[0].showWord=false
        console.log(this.recommondItems);
      })

    }
  }
}
</script>



<style scoped>
@import "../assets/css/common.css";
</style>
